/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-25 09:28:13
 * @LastEditors: NaturalHulk 2066634567@qq.com
 * @LastEditTime: 2024-02-04 11:47:15
 * @FilePath: /umi/src/pages/system/menu/index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect, useRef } from "react";
import { Space, Card, Table, Input, message } from "antd";
import { FormOutlined, DeleteOutlined } from "@ant-design/icons";
import { GetListAPI, addMenu, getMenu, updateMenu, delMenu } from "@/api/system/menu.ts";
import { handleTree } from "@/utils/ruoyi.js";
import FormData from "./form";

import { XHbutton, XHmodal, XHoperate, XHicon } from "@/components/xh-components/index";
const MenuPage = (props) => {
  // 表格枚举
  const columns = [
    {
      title: "菜单名称",
      dataIndex: "menuName",
      key: "menuName",
    },
    {
      title: "图标",
      dataIndex: "icon",
      render: (val) => <XHicon icon={val} />,
      key: "icon",
    },
    {
      title: "排序",
      dataIndex: "orderNum",
      key: "orderNum",
    },
    {
      title: "权限标识",
      dataIndex: "perms",
      key: "perms",
    },
    {
      title: "组件路径",
      dataIndex: "component",
      key: "component",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
    },
    {
      title: "操作",
      render: (val) => {
        return (
          <XHoperate
            list={[
              {
                label: "新增",
                emit: () => add(val),
                icon: <FormOutlined />,
                permissions: "system:menu:add",
              },
              {
                label: "修改",
                emit: () => edit(val),
                icon: <FormOutlined />,
                permissions: "system:menu:edit",
              },
              {
                label: "删除",
                danger: true,
                emit: () => del(val),
                icon: <DeleteOutlined />,
                permissions: "system:menu:remove",
              },

              {
                label: "查看",
                emit: () => see(val),
                icon: <DeleteOutlined />,
                permissions: "system:menu:query",
              },
            ]}
          />
        );
      },
    },
  ];

  // 各种状态
  const [state, setState] = useState({
    loading: false,
    show: false,
    title: "新增",
    btnLoading: false,
  });

  // 表格数据
  const [tableData, setTableData] = useState({
    data: [],
    total: 0,
  });

  const [dataForm, setDataForm] = useState({});

  // 表单ref
  const formRef = useRef(null);

  //新增弹窗
  const add = (val) => {
    if (val) {
      setDataForm({ ...dataForm, parentId: String(val.menuId) });
    }
    setState({
      ...state,
      show: true,
      title: "新增",
    });
  };

  //修改弹窗
  const edit = async (val) => {
    const { data: res } = await getMenu(val.menuId);
    setDataForm(res);
    setState({
      ...state,
      show: true,
      title: "修改",
    });
  };

  //查看弹窗
  const see = async (val) => {
    const { data: res } = await getMenu(val.menuId);
    setDataForm(res);
    setState({
      ...state,
      show: true,
      title: "查看",
    });
  };

  //取消弹窗
  const close = () => {
    setState({
      ...state,
      show: false,
    });
    setDataForm({}); //清空表单

    getList();
  };

  // 新增提交
  const addSub = async () => {
    const r = await formRef.current.validateFields();
    if (!r) return;
    try {
      setState({
        ...state,
        btnLoading: true,
      });
      await addMenu(r);
      message.success("新增成功!");
      close();
    } catch (err) {
      setState({
        ...state,
        btnLoading: false,
      });
    } finally {
    }
  };

  // 修改提交
  const editSub = async () => {
    const r = await formRef.current.validateFields();
    if (!r) return;
    try {
      setState({
        ...state,
        btnLoading: true,
      });
      await updateMenu({ ...r, menuId: dataForm.menuId });
      message.success("修改成功!");
      close();
    } catch (err) {
      setState({
        ...state,
        btnLoading: false,
      });
    } finally {
    }
  };

  const del = async (val) => {
    try {
      await delMenu(val.menuId);
      getList();
      message.success("删除成功!");
    } catch (error) {}
  };

  // 获取表格数据
  const getList = async () => {
    try {
      setState({
        loading: true,
      });
      const { data: result } = await GetListAPI();
      setTableData({
        data: handleTree(result, "menuId"),
      });
    } catch (err) {
      console.log(err);
    } finally {
      setState({
        loading: false,
      });
    }
  };

  useEffect(() => {
    getList();
  }, []);

  return (
    <div className="app-container">
      <Card>
        <XHbutton
          list={[
            {
              label: "新增",
              emit: () => add(),
              permissions: "system:menu:add",
            },
          ]}
        />
        <Table
          loading={state.loading}
          columns={columns}
          renderCell={() => ""}
          rowSelection={null}
          dataSource={tableData.data}
        />
      </Card>
      <XHmodal
        open={state.show}
        title={state.title}
        ok={() => (state.title == "新增" ? addSub() : editSub())}
        no={() => close()}
        body={<FormData ref={formRef} data={dataForm} title={state.title} />}
      />
    </div>
  );
};
export default MenuPage;
